<template>
  <div>
    <div class="container" ref="content" >
      <div class="newlist" v-if="isshow">
        <div class="bigbox">
          <div class="box" v-for="(item, index) in data" :key="index">
            <el-link class="title" href="" target="_blank" @click="goclick(index)">{{ item.title }}</el-link>
            <div class="date">{{ item.date }}</div>
          </div>
        </div>
        <el-pagination :page-size="10" background layout="prev, pager, next,total" :total="newStore?.newdata.length"
          style="margin-left: 30%; padding-top: 30px; padding-bottom: 30px" @current-change="handleCurrentChange"
          v-model:current-page="currentPage1" />
      </div>
      <div v-else class="new">
        <div class="inbox">
          <el-button type="success" plain @click="goback" style="margin: 20px">返回快讯列表</el-button>
          <div style="text-align: center; font-size: 20px; font-weight: 800">
            {{ nowitem.title }}
          </div>
          <div style="
              margin-left: 78%;
              font-size: 15px;
              color: #c5c6b6;
              margin-top: 10px;
            ">
            更新于：{{ nowitem.date }}
          </div>
          <div>
            <div class="newcontent" v-html="nowitem.content" ref="inbox"></div>
          </div>
          <el-divider> End. </el-divider>
          <div class="like">
            <el-rate v-model="value" :texts="['oops', 'disappointed', 'normal', 'good', 'great']" show-text
              size="large" allow-half @change="change" />
            <div class="wenzi">如果觉得我的文章对你有用,请给我评分吧！</div>
          </div>
          <div style="
              display: flex;
              justify-content: space-around;
              margin-top: 50px;
              padding-bottom: 50px;
            ">
            <el-button type="primary" @click="before" :disabled="!nowindex">
              <上一篇</el-button>
            <el-button type="primary" @click="next" :disabled="nowindex == newStore.newdata.length - 1">下一篇></el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { newObject, newRespnseData, reqtype } from '@/api/new/type'
import { getnewdata, reqlike } from '@/api/new/index'
import { usenewStore } from '@/stores/new'
const newStore = usenewStore()
//引入用户相关的小仓库
import { useUserStore } from '@/stores/user'
let useStore = useUserStore()

import { ref, onMounted } from 'vue'
const value = ref()
onMounted(() => {
  initdata()
})

const goback = () => {
  isshow.value = true
}
import { ElMessage } from 'element-plus'
const change = async () => {
  let flag = 0

  for (let i = 0; i < nowitem.value.like.length; i++) {
    if (nowitem.value.like[i].username == useStore.username) {
      nowitem.value.like[i].value = value.value
      flag = 1
      break
    }
  }
  if (!flag) {
    nowitem.value.like.push({
      id: nowitem.value.id,
      username: useStore.username,
      value: value.value
    })
  }

  let result: reqtype = await reqlike(nowitem.value.like)
  if (result.status == 0) {
    ElMessage({
      message: '评分成功！',
      type: 'success',
    })
  }
}
let content = ref(null) //本质是reactive({value:null})
const before = () => {
  if(content.value) {
    (content.value as HTMLDivElement).scrollIntoView()
  }
  nowindex.value--
  nowitem.value = newStore.newdata[nowindex.value]

}

const next = () => {
  nowindex.value++
  nowitem.value = newStore.newdata[nowindex.value]
  if(content.value) {
    (content.value as HTMLDivElement).scrollIntoView()
  }
}

import { nextTick } from 'vue'


let data = ref<newObject[]>([])

let nowindex = ref(0)
let nowitem = ref()
let isshow = ref(true)
const goclick = (index: number) => {
  nowindex.value = index
  nowitem.value = data.value[nowindex.value]
  nowitem.value.content = showHtml(nowitem.value.content)
  for (let j = 0; j < nowitem.value.like.length; j++) {
    if (nowitem.value.like[j].username == useStore.username) {
      value.value = nowitem.value.like[j].value

      break
    }
  }
  nextTick(() => {
    isshow.value = false
  })
}

const showHtml = (str: string) => {
  if (str.indexOf('\\t') !== -1) {
    console.log('String contains a tab character.')
  }

  return str.replace(/\\t/g, '\u3000\u3000').replace(/\\\t/g, '\u3000\u3000')
}

const currentPage1 = ref(1)
const initdata = async () => {
  let result: newRespnseData = await getnewdata()
  for (let i = 0; i < result.data.length; i++) {
    result.data[i].like = JSON.parse(result.data[i].like)
  }
  data.value = result.data.slice(
    (currentPage1.value - 1) * 10,
    (currentPage1.value - 1) * 10 + 10
  )
  newStore.modifynewdata(result.data)
}

const handleCurrentChange = () => {
  data.value = newStore?.newdata.slice(
    (currentPage1.value - 1) * 10,
    (currentPage1.value - 1) * 10 + 10
  )
}
</script>

<style scoped>
.newcontent ::v-deep img {
  width: 100%;
  object-fit: fill;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;

  .newlist {
    margin-top: 100px;
    width: 70%;
    height: 100%;
    background-color: white;

    .bigbox {
      padding-top: 40px;
    }

    .box {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .title {
        font-size: 20px;
      }

      .date {
        color: #c5c6b6;
      }
    }
  }

  .new {
    margin-top: 100px;
    width: 70%;

    .inbox {
      background-color: white;
    }

    .newcontent {
      padding-left: 20px;
      width: 100%;
      margin-top: 50px;
    }

    .newcontent>>>p {
      font-weight: 100;
    }
  }

  .like {
    color: #c5c6b6;
    font-size: 13px;
    margin-left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
